<!--
 * @Descripttion: 
 * @Author: 周杨
 * @Date: 2021-08-09 18:17:36
 * @LastEditors: 周杨
 * @LastEditTime: 2021-09-23 17:05:40
-->
<template>
    <div class="container">
        <ul>
            <li class="li back-fff" v-for="(item,index) in activityList" :key="index">
                <div class="h4">{{item.F_ActivityName}}</div>
                <p class="p_text" v-html="$ut.strtoHtml(item.F_ActivityContent)"></p>
                <div class="flex flex-between align-center">
                    <div>
                        <el-button size="medium" type="primary" @click="signUp(item)" :disabled="item.F_IsAvaiable!='1'">Sign Up</el-button>
                    </div>
                    <div class="text">
                        <div class="flex-center">
                            <!-- <div class="flex-center">
                                <img class="icon" :src="cdns.activity_user" />
                                <span class="icon-text">({{`${item.F_AppliedCount || 0}/${item.F_NumLimit || 0}`}})</span>
                            </div> -->
                            <div class="flex-center text-right">
                                <img class="icon" :src="cdns.activity_time" />
                                {{$ut.dateFormat(item.F_BeginDate,'YYYY-mm-dd')}} ~ {{$ut.dateFormat(item.F_EndDate,'YYYY-mm-dd')}}
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { GetActivityList } from "@/api/activity";
export default {
    inject:['cdns'],
    data() {
        return {
            activityList: [],
        }
    },
    mounted() {
        //TODO 分页参数写死的,需要改成动态
        GetActivityList({ pageSize: 10, pageNum: 1 }).then(res => {
            this.activityList = res.data.Data;
        })
    },
    methods: {
        signUp(item) {
            this.$router.push({
                path: '/activity/form',
                query: {
                    formid: item.F_FormId,
                    F_ActivityId: item.F_ActivityId
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
ul {
    .li {
        padding: 20px 40px 20px 40px;
        margin-top: 10px;
        &:first-child {
            margin-top: 20px;
        }
        &:last-child {
            margin-bottom: 88px;
        }
        .h4 {
            font-size: 16px;
            font-weight: bold;
        }
        .p_text {
            margin-top: 20px;
            font-size: 14px;
            line-height: 26px;
            color: #4d4d4d;
            margin-bottom: 34px;
        }
        .text {
            color: #808080;
        }
        .icon {
            height: 16px;
            margin-right: 5px;
        }
        .icon-text {
            width: 80px;
        }
        .text-right {
            margin-left: 65px;
        }
    }
}
</style>